<template>
	<Form :model="formData">

		<FormItem label="父级部门" label-position="top">
			<Input :model-value="row.parentName" disabled />
		</FormItem>
		
		<FormItem label="部门名" label-position="top">
			 <Input v-model="formData.name" placeholder="请输入部门名称" />
		</FormItem>
		
		<FormItem label="部门编号" label-position="top">
			<Input v-model="formData.code" v-if="row.parentId !=null"
             placeholder="请输入部门编号(四位数字),例如 `0000`, 会自动添加父级部门编号作为前缀">
          <template #prepend >
            <span>{{ row.parentCode }}</span>
          </template>
			</Input>
      <Input v-model="formData.code" v-else
             placeholder="请输入部门编号(四位数字),例如 `0000`, 会自动添加父级部门编号作为前缀" />
		</FormItem>
		
		<FormItem label="状态" label-position="top">
		  <Switch size="large" v-model="formData.status">
			<template #open>
			  <span>启用</span>
			</template>
			<template #close>
			  <span>禁用</span>
			</template>
		  </Switch>
		</FormItem>
	</Form>
		
	<div class="demo-drawer-footer">
		<Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
		<Button type="primary" @click="saveOrUpdateDepart">保存</Button>
	</div>
</template>

<script>
export default {
  props: {
     row: {
       type: Object,
       required: false,
     }
  },
	data() {
		return {
			formData: {
				name: this.row.name,
        code: this.row.code,
				status: this.row.status ?? true,
			},
			menuList: [
				{
					id: 1, 
					name: '系统管理'
				}, 
				{
					id: 2, 
					name: '用户管理'
				},
			]
		}
	},
	emits: ["close-win"],
	methods: {
    saveOrUpdateDepart(event) {
       // 获取 父部门的 编号
       if (this.row.id == null) {
         let prefix = this.row.parentCode ?? '';
         let param = {parentId: this.row.parentId,
                      name: this.formData.name,
                      code: prefix + this.formData.code,
                      status: this.formData.status};
         // 添加 部门
         this.$api.addDepart(param).then( ({data: ret})=> {
             // 如果成功了
             if (ret.status === "10000") {
               this.$emit('close-win' , true) ;
               this.$Message.success({background: true, content:'数据添加成功'});
             }else{
               this.$Message.error({background: true, content: ret.message});
             }
         })
       }else{ // 实现修改
          let param = {id: this.row.id, name: this.formData.name, code: this.row.parentCode + "" + this.formData.code, status: this.formData.status};
          this.$api.modifyDepart(param).then(({data:ret})=> {
            if (ret.status === "10000") {
              this.$emit('close-win' , true) ;
              this.$Message.success({background: true, content:'数据修改成功'});
            }else{
              this.$Message.error({background: true, content: ret.message});
            }
          })
       }
    }
  }
}
</script>

<style scoped>
.icon {
	vertical-align: middle;
	margin: 0 3px;;
}
.demo-drawer-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>